<template>
  <el-container>
    <el-main>
      <el-table
        border
        stripe
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          align="center"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="author"
          label="评论人"
          align="center">
        </el-table-column>
        <el-table-column
          prop="content"
          align="center"
          label="评论内容">
        </el-table-column>
        <el-table-column
          prop="created"
          align="center"
          width="200px"
          label="评论时间">
        </el-table-column>
        <el-table-column
          prop="ip"
          align="center"
          label="IP">
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="评论状态">
		  <template slot-scope="scope">
		  	    <span v-if="scope.row.status == 0">未审核</span>
		  		<span v-if="scope.row.status == 1">通过</span>
				<span v-if="scope.row.status == 2">未通过</span>
		  </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="250px"
          label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
            <el-button size="small" type="warning" @click="refuse(scope.row.id,2)">拒绝</el-button>
            <el-button size="small" type="primary" @click="refuse(scope.row.id,1)">通过</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        style="margin-top: 10px"
        align="right"
        layout="prev, pager, next"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="getComment"
        :total="total">
      </el-pagination>
	  <!-- 模态框 -->
	  <div class="dct_camera">
	        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
	          <span>确定要删除吗？</span>
	          <span slot="footer" class="dialog-footer">
	            <el-button @click="dialogVisible = false">取 消</el-button>
	            <el-button @click="delCommentById()" type="primary">确 定</el-button>
	          </span>
	        </el-dialog>
	     </div>
    </el-main>
  </el-container>
</template>

<script>
	import CommentApi from '@/api/comment'
  export default {
	  inject:['reload'], 
    name: 'index',
    data() {
      return {
		  currentPage:1,
		  pageSize:5,
		  total:0,
		  commentId:0,
		  dialogVisible:false,
        tableData: [
          {
            id: '1',
            author: '李四1',
            content: '第1个评论',
            created: new Date().toLocaleString(),
            ip: '127.0.0.1',
            status: 1
          },
          {
           id: '2',
           author: '李四2',
           content: '第2个评论',
           created: new Date().toLocaleString(),
           ip: '127.0.0.2',
           status: 2
          },{
            id: '3',
            author: '李四3',
            content: '第3个评论',
            created: new Date().toLocaleString(),
            ip: '127.0.0.3',
            status: 0
          }
        ]
      }
    },
		created() {
			this.getComment()
		},
		methods:{
			getComment(){
				CommentApi.getAllComments(this.currentPage,this.pageSize).then(resp=>{
					this.tableData=resp.data.row
					this.total=resp.data.total
				})
			},
			del(id){
				this.commentId=id
				this.dialogVisible=true
			},
			delCommentById(){
				console.log(this.commentId)
				CommentApi.delCommentById(this.commentId).then(resp=>{
					//提示信息
					this.$message({
						message:"删除成功",
						type:"success"
					})
					//关闭模态框
					this.dialogVisible=false
					//页面刷新
					this.reload()
				})
			},
			refuse(id,sign){
				let new_data={
					"id":id,
					"sign":sign
				}
				CommentApi.refuse(new_data).then(resp=>{
					//提示信息
					this.$message({
						message:resp.msg,
						type:"success"
					})
					//页面刷新
					this.reload()
				})
			},
			
		}
  }
</script>

<style scoped>

</style>
